<template>
  <div class="modalStyle">
    <div class="selection">
      <el-input v-model="search" placeholder="请输入内容" :clearable="true"></el-input>
    <el-button @click="selectFunc">确定</el-button>
    </div>

    <div class="content"> 
      <!-- <ul>
        <li v-for="item in menuList" :key="item.label">
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
          >
            <div v-for="(itemIndex,index) in item.list" :key="index">
              {{itemIndex.listname}}
            </div>
            <el-button slot="reference">{{item.name}}</el-button>
          </el-popover>
        </li>
      </ul> -->
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
name:'index',
data(){
  return {
    search:'',
    menuList:[
      {name:'英文',label:1,list:[{listname:'数学'}]},
      {name:'英文',label:2},
      {name:'英文',label:3},
      {name:'英文',label:4}
      ]
  }
},
methods:{
  selectFunc(){
    console.log('selection',this.$axios)
    // 发送请求
    this.$axios.post('',{
      search:this.search
    }).then(res=>{
      console.log(res,'res')
    })
  }
}
}
</script>

<style lang="less" scoped>
.el-popover{
  background: red;
}
  .modalStyle{
    width: 100%;
    height: 100%;
    /*background-color: #42b983;*/
  }
.selection{
  width: 43vw;
  height: 40px;
  // background-color: red;
  /*position: absolute;*/
  // top: 10px;
  /*left: 50%;*/
  margin: 0 auto;
  // transform: translate(-50%);
  display: flex;
  margin-top: 10px;
}
.content{
  width: 90%;
  height: 400px;
  margin: 0 auto;
  background: skyblue;
  margin-top: 10px;
  
}
</style>
